import React, { Component } from 'react'
// Import Swiper React components
import SwiperCore, { Pagination,Autoplay} from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/pagination/pagination.scss';

import{connect} from 'react-redux'
SwiperCore.use([ Pagination,Autoplay]);


class Find extends Component {
    state={
        arr:[
            {
                name:'每日推荐',
                icon:'iconfont icon-rili'
            },
            {
                name:'歌单',
                icon:'iconfont icon-gedan'
            },
            {
                name:'排行榜',
                icon:'iconfont icon-paihangbang'
            },
            {
                name:'直播',
                icon:'iconfont icon-zhibo1-copy'
            },
            {
                name:'电台',
                icon:'iconfont icon-diantai'
            },
            {
                name:'数字专辑',
                icon:'iconfont icon-zhuanji'
            },
            {
                name:'唱聊',
                icon:'iconfont icon-changge'
            },
            {
                name:'游戏专区',
                icon:'iconfont icon-youxi'
            },
        ]
    }
    render() {
        let {arr} = this.state
        let {list} = this.props
        let {chinamusic} = this.props
        let {chinamusic2} = this.props
        console.log(list.list)
        // console.log(chinamusic)
        // let arr = ['每日推荐','歌单','排行榜','直播','电台','数字专辑','唱跳','游戏',]
        return (
            <div className="banner">
                <div className="lunbo">
                <Swiper
                    spaceBetween={50}
                    slidesPerView={1}
                    autoplay
                    pagination={{ clickable: true }}
                    >
                        <SwiperSlide><img src={require("../../assets/1.jpg").default} alt=""/></SwiperSlide>
                        <SwiperSlide><img src={require('../../assets/2.jpg').default} alt=""/></SwiperSlide>
                        <SwiperSlide><img src={require('../../assets/3.jpg').default} alt=""/></SwiperSlide>
                        <SwiperSlide><img src={require('../../assets/4.jpg').default} alt=""/></SwiperSlide>
                        <SwiperSlide><img src={require('../../assets/5.jpg').default} alt=""/></SwiperSlide>
                    </Swiper>
                </div>
                <div className="navs">
                    {
                        arr.map((item,key) => <div className="item" key={key}>
                            <div>
                                <span className={item.icon}></span>
                            </div>
                            <span className="s">{item.name}</span>
                        </div>)
                    }
                </div>
                <div className="ban">
                    <div className="ban1">
                        <h3>推荐歌单</h3>
                        <span>查看更多</span>
                    </div>
                    <div className="ban2">
                        {
                            list.list.map((item,key) =><div className="item" key={key}>
                                <img src={item.img.default} alt=""></img>
                                <span>{item.title}</span>
                            </div>)
                        }
                    </div>
                </div>
                <div className="content">
                    <h6>私人订制</h6>
                    <div className="ban1">
                        <h3>华语金曲点唱机</h3>
                        <span className="bo"><span className="iconfont icon-bofang2"></span>播放全部</span>
                    </div>
                    <div className="ban2">
                        <div className="d">
                            <div className="items">
                                {
                                    list.chinamusic.map((item,key) =><div className="item" key={key}>
                                        <div className="item-l">
                                            <img src={item.img.default} alt="" />
                                            <div className="c">
                                                <p>{item.name}<span>-(电视剧原声)</span></p>
                                                <span>放下包袱，活在当下</span>
                                            </div>   
                                        </div>
                                        <div className="item-r">
                                            <button className="start1">
                                                <span className="iconfont icon-bofang2"></span>
                                            </button>
                                        </div>
                                    </div>)
                                }    
                            </div>
                            <div className="items">
                                {
                                    list.chinamusic2.map((item,key) =><div className="item" key={key}>
                                        <div className="item-l">
                                            <img src={item.img.default} alt="" />
                                            <div className="c">
                                                <p>{item.name}<span>-(电视剧原声)</span></p>
                                                <span>放下包袱，活在当下</span>
                                            </div>   
                                        </div>
                                        <div className="item-r">
                                            <button className="start1">
                                                <span className="iconfont icon-bofang2"></span>
                                            </button>
                                        </div>
                                    </div>)
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
let mapStateToProps =(state) => {
    console.log('拿到的数据',state)
    return {
        list:state.list,
        chinamusic:state.chinamusic,
        chinamusic2:state.chinamusic2
    }
}
let mapDispatchToProps =(dispatch) => {
    return {
        
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Find)
